<template>
<div class="info-block">
  <el-input
      type="textarea"
      placeholder="请输入您的意见"
      v-model="form.content"
      maxlength="200"
      show-word-limit
      :rows="6">
  </el-input>
  <div class="block-body-content" style="margin-top: 20px;">
    <UploadFile :imageUrl="imgUrlList" @uploadSuccess="imgUrlSuccess" @remove="removeImgUrl" :accept="['jpg','jpeg','png']" :multiple="true" :limit="9"></UploadFile>
  </div>
</div>
</template>

<script>
import {randomString} from "@/utils/utils";
import UploadFile from "@/components/Upload/UploadFile";
import {validate} from "@/utils/validate";
import {opinionAddApi} from "@/api/user";
export default {
  name: "Feedback",
  components: {UploadFile},
  data(){
    return{
      form:{
        content:'',
        imgUrlList:[]
      },
      rules: {
        idea: {
          name: '意见反馈',
          required: true
        }
      },
      imgUrlList:[],
    }
  },
  methods:{
    imgUrlSuccess(e) {
      this.form.imgUrlList.push(e.data);
      this.imgUrlList.push({name:randomString(4)+'img',url:e.data})
    },
    removeImgUrl(data){
      this.imgUrlList=data.list;
      if(data.file.id){
        let loading=this.$loading({text:'删除中'})
        this.$message.success('删除成功')
        loading.close()
      }
    },
    submit(){
      if (validate(this.form, this.rules)) {
        const loading=this.$loading({text:'提交中'});
        console.log(this.form.imgUrlList)
        let imgUrlList = this.form.imgUrlList.length>0?this.form.imgUrlList.join(','):'';
        opinionAddApi({content: this.form.content,imgUrls: imgUrlList}).then(()=>{
          this.$message.success('保存成功');
        }).finally(()=>{
          loading.close()
        })

      }
    }
  }
}
</script>

<style lang="scss" >
.el-upload--picture-card {
  max-height: 150px;
  max-width: 150px;
  line-height: 150px;
}
</style>
